<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* 变细 */
        .weight-lighter {
            font-weight: lighter;
        }

        /* 正常 */

        .normal {
            background-color: rgba(255, 0, 0, 0.363);
        }

        .weight-normal {
            font-weight: normal;
        }

        .weight-400 {
            font-weight: 400;
        }

        /* 加粗 */

        .bold {
            background-color: rgba(0, 128, 0, 0.295);
        }

        .weight-bolder {
            font-weight: bolder;
        }

        .weight-700 {
            font-weight: 700;
        }

        .weight-bold {
            font-weight: bold;
        }

        /* 最粗 */
        .weight-900 {
            font-weight: 900;
        }
    </style>
</head>

<body>

    <p class="weight-lighter">字体粗度为lighter</p>
    <div class="normal">
        <p class="font-default">默认字体粗度</p>
        <p class="weight-normal">字体粗度为normal</p>
        <p class="weight-400">字体粗度为400</p>
    </div>
    <div class="bold">
        <p class="weight-bolder">字体粗度为bolder</p>
        <p class="weight-700">字体粗度为700</p>
        <p class="weight-bold">字体粗度为bold</p>
    </div>
    <p class="weight-900">字体粗度为900</p>
</body>

</html>